<template>
  <div class="app-container">
    <!--查询条件-->
    <div class="head-container">
      <el-form ref="queryForm" inline label-width="80px" :model="queryForm" size="small">
        <el-form-item label="申请用户" prop="userName">
          <el-input v-model="queryForm.userName" placeholder="请输入申请用户" style="width:180px;"></el-input>
        </el-form-item>
        <el-form-item label="印章名称" prop="sealName">
          <el-input v-model="queryForm.sealName" placeholder="请输入印章名称" style="width:180px;"></el-input>
        </el-form-item>
        <el-form-item label="审批状态" prop="approveStatus">
          <el-select v-model="queryForm.approveStatus" style="width:180px;">
            <el-option label="全部" value="" :key="-1"/>
            <el-option v-for="(item,index) in stateList"
                       :label="item.label"
                       :value="item.value"
                       :key="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间" prop="approveStartTime">
          <el-date-picker v-model="queryForm.approveStartTime"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          style="width:240px;"/>
        </el-form-item>
        <el-form-item label="审核人员" prop="approveUserName">
          <el-input v-model="queryForm.approveUserName" placeholder="请输入审核人员" style="width:180px;"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="querySearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--表格渲染-->
    <el-table ref="table" v-loading="loading" :data="tableData" row-key="id">
      <el-table-column type="index" label="序号"/>
      <el-table-column prop="createName" label="申请用户"/>
<!--      <el-table-column prop="createAccount" label="用户手机号"/>-->
      <el-table-column prop="sealName" label="印章名称"/>
      <el-table-column prop="userName" label="印章图片">
        <template #default="scope">
          <el-link type="primary" @click="showViewImg(scope.row.id)">查看图片</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="申请时间">
        <template #default="scope">
          {{parseTime(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="approveStatus" label="审核状态">
        <template #default="scope">
          <el-link v-if="scope.row.approveStatus==0" :underline="false" type="warning">待审核</el-link>
          <el-link v-if="scope.row.approveStatus==1" :underline="false" type="primary">审核通过</el-link>
          <el-link v-if="scope.row.approveStatus==2" :underline="false" type="danger">审批驳回</el-link>
          <el-link v-if="scope.row.approveStatus==9" :underline="false" type="info">撤回</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="approveTime" label="审核时间">
        <template #default="scope">
          {{parseTime(scope.row.approveTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="approveUserName" label="审核人员"/>
      <el-table-column label="操作" width="60px">
        <template #default="scope">
          <el-link v-if="scope.row.approveStatus===0" type="primary" @click="showDetail(scope.row.id)">审核</el-link>
          <el-link v-else type="primary" @click="showDetail(scope.row.id)">查看</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination :total="total"
                :page="queryForm.page"
                :limit="queryForm.pageSize"
                :autoScroll="false"
                @pagination="handlerPageChange"
    />
    <!-- 图片预览 -->
    <el-image v-if="detail.waterImg"
              ref="imgView"
              style="display: none"
              :src="`data:image/png;base64,${detail.waterImg}`"
              :preview-src-list="[`data:image/png;base64,${detail.waterImg}`]"
    />
    <!--弹窗-->
    <el-dialog :visible.sync="visibleDetail"
               :close-on-click-modal="false"
               width="800px"
               title="查看详情"
    >
      <h4 class="h4-title"><i class="line"/>审核详情</h4>
      <el-form ref="detailForm" :model="detail" size="mini" :rules="detailFormRule" label-width="100px">
        <el-form-item label="申请用户:">{{ detail.createName }}</el-form-item>
<!--        <el-form-item label="用户手机号:">{{ detail.createAccount }}</el-form-item>-->
        <el-form-item label="印章名称:">{{ detail.sealName }}</el-form-item>
        <el-form-item label="印章图片:">
          <div style="width: 200px; height: 200px; border:1px solid #ccc;">
            <el-image
                style="width: 200px; height: 200px"
                :src="`data:image/png;base64,${detail.waterImg}`"
                :preview-src-list="[`data:image/png;base64,${detail.waterImg}`]"
                fit="scale-down"></el-image>
          </div>
        </el-form-item>
        <template v-if="detail.approveStatus===0">
          <el-form-item label="审核结果" prop="submitApproveStatus">
            <el-radio-group v-model="detail.submitApproveStatus">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="detail.submitApproveStatus===2" label="拒绝原因" prop="approveRemark">
            <el-input v-model="detail.approveRemark" type="textarea" />
          </el-form-item>
        </template>
      </el-form>
      <template v-if="detail.approveStatus!==0">
        <h4 class="h4-title"><i class="line"/>审核记录</h4>
        <el-table :data="approveList">
          <el-table-column label="审核人员" prop="approveUserName"></el-table-column>
          <el-table-column label="审核时间" prop="approveTime">
            <template #default="scope">
              {{parseTime(scope.row.approveTime)}}
            </template>
          </el-table-column>
          <el-table-column label="审核结果" prop="approveStatus">
            <template #default="scope">
              <el-link v-if="scope.row.approveStatus==0" :underline="false" type="warning">待审核</el-link>
              <el-link v-if="scope.row.approveStatus==1" :underline="false" type="primary">审核通过</el-link>
              <el-link v-if="scope.row.approveStatus==2" :underline="false" type="danger">审批驳回</el-link>
              <el-link v-if="scope.row.approveStatus==9" :underline="false" type="info">撤回</el-link>
            </template>
          </el-table-column>
          <el-table-column label="拒绝原因" prop="approveRemark"></el-table-column>
        </el-table>
      </template>
      <span slot="footer" class="dialog-footer">
          <el-button v-if="detail.approveStatus===0" type="primary" @click="submitAudio()">确 定</el-button>
        <el-button @click="visibleDetail = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {queryPageList, getSealInfo, approve} from '@/api/signManage/signManage'
import {parseTime} from '@/utils/ruoyi'
import Pagination from '@/components/Pagination'
// import CRUD, {crud, form, header, presenter} from "@/components/Crud/crud";
// import common from "@/assets/js/common";
// import rrOperation from '@/components/Crud/RR.operation'
// import crudOperation from '@/components/Crud/CRUD.operation'
// import udOperation from '@/components/Crud/UD.operation'
// import pagination from '@/components/Crud/Pagination'
// const defaultForm= {
//   sealName: '', // 印章名称,
//   approveStatus: '', //审批状态 0待审批 1审批通过 2审批驳回 9 撤回
//   approveEndTime: null, //申请时间结束
//   approveUserName: '', // 审核人员,
//   approveStartTime:[],
// }

export default {
  name: 'UserSourceManage',
  components: {
    Pagination
  },
  data() {
    return {
      queryForm: {
        page: 1,
        pageSize: 10,
        userName: '', // 申请用户,
        sealName: '', // 印章名称,
        approveStatus: '', //审批状态 0待审批 1审批通过 2审批驳回 9 撤回
        approveStartTime: null, //申请时间开始
        approveEndTime: null, //申请时间结束
        approveUserName: '', // 审核人员,
        time:[],
      },
      stateList: [
        {
          label: "待审批",
          value: 0
        },
        {
          label: "审批通过",
          value: 1
        },
        {
          label: "审批驳回",
          value: 2
        },
        {
          label: "撤回",
          value: 9
        }
      ],
      tableData: [],
      visibleDetail: false,
      detail: {
        submitApproveStatus: "",
        approveRemark: "",
      },
      loading: false,
      total: 0,
      // showViewImg: false,
    }
  },
  created() {
  },
  computed: {
    // 审核列表记录
    approveList() {
      const {detail} = this;
      return [
        {
          approveUserName: detail.approveUserName,
          approveTime: detail.approveTime,
          approveStatus: detail.approveStatus,
          approveRemark: detail.approveRemark,
        }
      ]
    },
    detailFormRule() {
      const {detail} = this
      const rule = {
        submitApproveStatus: [
          {required: true, message: '请选择审核结果', trigger: 'change'}
        ],
      }
      if (detail.submitApproveStatus==2) {
        rule.approveRemark = [{required: true, message: '请输入拒绝原因', trigger: 'change'}]
      }
      return rule
    },

  },
  mounted() {
     this.getList();
  },
  watch:{
  },
  methods: {
    parseTime:parseTime,
    /**
     * 查询
     */
    querySearch() {
      this.queryForm.page = 1;
      this.queryForm.pageSize = 10;
      this.getList();
    },
    /**
     * 重置
     */
    resetSearch() {
      this.$refs.queryForm.resetFields();
      this.getList();
    },
    /**
     * 获取列表
     * @returns {Promise<void>}
     */
    async getList() {
      const {queryForm} = this;
      const {data: {list, total}} = await queryPageList({
        ...queryForm,
        pageNum: queryForm.page,
        pageSize: queryForm.pageSize,
        approveStartTime:queryForm.time&&queryForm.time.length>0?parseTime(queryForm.time[0],'{y}-{m}-{d}'):null,
        approveEndTime:queryForm.time&&queryForm.time.length>0?parseTime(queryForm.time[1],'{y}-{m}-{d}'):null
      })
      this.tableData = list;
      this.total = total
    },
    handlerPageChange(val){
      this.queryForm.page = val.page
      this.queryForm.limit = val.pageSize
    },
    /**
     * 获取详情
     * @param id
     * @returns {Promise<void>}
     */
    async getDetail(id) {
      this.loading = true
      try {
        const {data} = await getSealInfo({
          sealId: id  //
        });
        this.detail = {
          ...data,
          submitApproveStatus: "",
        };
      } catch (e) {
        // 详情接口报错
        console.log(e);
      }
      this.loading = false
    },
    async showViewImg(id){
      await this.getDetail(id);
      this.$nextTick(()=>{
        this.$refs.imgView.showViewer=true
      })
    },
    /**
     * 显示详情弹框
     * @param id
     * @returns {Promise<void>}
     */
    async showDetail(id) {
      await this.getDetail(id);
      this.visibleDetail = true
    },
    /**
     * 提交审核状态
     * @returns {Promise<void>}
     */
    async submitAudio() {
      // 校验表单
      const valid = await this.$refs.detailForm.validate();
      const {detail} = this;
      if(!valid){
        return  false
      }
      this.loading = true
      try {
        await approve({
          "id": detail.id,//印章id
          "approveStatus": detail.submitApproveStatus,
          "approveRemark": detail.approveRemark
        })
      }catch (e) {
        console.log(e,'提交审核接口报错')
      }
      this.loading = false
      this.visibleDetail = false
      this.getList();
      this.$message.success('提交成功');
    }
  }
}
</script>

<style lang="scss" scoped>
.h4-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .line {
    width: 3px;
    height: 12px;
    background: #2362FB;
    margin-right: 6px;
  }
}
</style>
